<template>
	<view class="white">
		<u-navbar back-text="" :is-back="false" :border-bottom="false" title-color="#fff" title-size="36" title="中华墨坊"
			:background="{ background: '#333333' }"></u-navbar>
		<view class="">
			<view class="page-section page-section-spacing swiper paddings text-grey">
				<swiper :autoplay="true" :interval="3000" :duration="500"
					indicator-active-color="#fff" :circular="true" @change="changeAutoplay" style="height: 355rpx;">
					<block v-for="(item,i) in background" :key="i">
						<swiper-item>
							<view :class="'demo-text-'+(i+1)">
								<image src="../../static/images/banren.png" mode="scaleToFill"></image>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<view class="indicator u-flex justify-center">
					<text class="yang" v-for="(item,index) in background" :key="index" :class="active==index?'bianda':''"></text>
				</view>
			</view>
			<view class="notice">
				<u-notice-bar mode="vertical" color="#FF545E" :is-circular="false" :list="list"></u-notice-bar>
			</view>
			<view class="weui-cell__bd u-flex" @click="multiRedirect('/pages/index/search')">
				<view class="cuIcon-search u-font-30 text-orange ">
				</view>
				<input class="weui-input u-font-26 u-flex-1" disabled name="input" placeholder="输入你想看的" />
				<view class="seek bg-orange u-font-24">
					搜索
				</view>
			</view>
			<view class="flex nax flex-wrap">
				<view class="" @click="multiRedirect('/pages/my/aute')">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
					<view class="text-center u-font-24 text-bold">
						公司介绍
					</view>
				</view>
				<view class="" @click="multiRedirect('/pages/index/course')">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
					<view class="text-center u-font-24 text-bold">
						课程介绍
					</view>
				</view>
				<view class="" @click="multiRedirect('/pages/index/course')">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
					<view class="text-center u-font-24 text-bold">
						器材介绍
					</view>
				</view>
				<view class="" @click="multiRedirect('/pages/index/sinatv')">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
					<view class="text-center u-font-24 text-bold">
						直播入口
					</view>
				</view>
				<view class="" @click="multiRedirect('/pages/index/course')">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
					<view class="text-center u-font-24 text-bold">
						学生作品
					</view>
				</view>
				<view class="" @click="multiRedirect('/pages/index/course')">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
					<view class="text-center u-font-24 text-bold">
						主题课程
					</view>
				</view>
				<view class="" @click="multiRedirect('/pages/index/course')">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
					<view class="text-center u-font-24 text-bold">
						免费课程
					</view>
				</view>
				<view class="" @click="multiRedirect('/pages/index/course')">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
					<view class="text-center u-font-24 text-bold">
						公开课程
					</view>
				</view>
				<view class="" @click="multiRedirect('/pages/index/course')">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
					<view class="text-center u-font-24 text-bold">
						特色课程
					</view>
				</view>
				<view class="" @click="multiRedirect('/pages/my/curriculum')">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
					<view class="text-center u-font-24 text-bold">
						节日课程
					</view>
				</view>
			</view>

			<view class="">
				<view class="title u-flex justify-between">
					<view class="u-font-34 text-bold">
						课程推荐
					</view>
					<view class="u-font-24" @click="multiRedirect('/pages/index/more?title=课程推荐')">
						全部<text class="cuIcon-right"></text>
					</view>
				</view>
				<view class="main-box">
					<view class=" flex" @click="multiRedirect('/pages/details/details')">
						<view class="">
							<image src="../../static/images/chanpin.jpg" mode="aspectFill"></image>
						</view>
						<view class="">
							<view class="u-font-28 text-bold">
								英语课程 英语课程 英语课程 英语课程 英语课程 英语课程 英语课程 英语课程
							</view>
							<view class="u-font-24">
								主讲老师：周海宏
							</view>
						</view>
					</view>
					<view class=" flex" @click="multiRedirect('/pages/details/details')">
						<view class="">
							<image src="../../static/images/chanpin.jpg" mode="aspectFill"></image>
						</view>
						<view class="">
							<view class="u-font-28 text-bold">
								英语课程 英语课程 英语课程 英语课程 英语课程 英语课程 英语课程 英语课程
							</view>
							<view class="u-font-24">
								主讲老师：周海宏
							</view>
						</view>
					</view>
					<view class="flex" @click="multiRedirect('/pages/details/details')">
						<view class="">
							<image src="../../static/images/chanpin.jpg" mode="aspectFill"></image>
						</view>
						<view class="">
							<view class="u-font-28 text-bold">
								英语课程 英语课程 英语课程 英语课程 英语课程 英语课程 英语课程 英语课程
							</view>
							<view class="u-font-24">
								主讲老师：周海宏
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="activity">
				<view class="title u-flex justify-between">
					<view class="u-font-34 text-bold">
						活动推荐
					</view>
					<view class="u-font-24" @click="multiRedirect('/pages/index/more?title=活动推荐')">
						全部<text class="cuIcon-right"></text>
					</view>
				</view>
				<view class="main-box">
					<view class=" flex" @click="multiRedirect('/pages/details/details')">
						<view class="">
							<image src="../../static/images/chanpin.jpg" mode="aspectFill"></image>
						</view>
						<view class="">
							<view class="u-font-28 text-bold">
								英语课程 英语课程 英语课程 英语课程 英语课程 英语课程 英语课程 英语课程
							</view>
							<view class="u-font-24">
								时间：2021.03.18-08.01
							</view>
							<view class="u-font-24">
								地点：上海市外滩一号
							</view>
							<view class="u-font-24">
								类型：展览
							</view>
						</view>
					</view>
					<view class=" flex" @click="multiRedirect('/pages/details/details')">
						<view class="">
							<image src="../../static/images/chanpin.jpg" mode="aspectFill"></image>
						</view>
						<view class="">
							<view class="u-font-28 text-bold">
								英语课程 英语课程 英语课程 英语课程 英语课程 英语课程 英语课程 英语课程
							</view>
							<view class="u-font-24">
								时间：2021.03.18-08.01
							</view>
							<view class="u-font-24">
								地点：上海市外滩一号
							</view>
							<view class="u-font-24">
								类型：展览
							</view>
						</view>
					</view>
					<view class="flex" @click="multiRedirect('/pages/details/details')">
						<view class="">
							<image src="../../static/images/chanpin.jpg" mode="aspectFill"></image>
						</view>
						<view class="">
							<view class="u-font-28 text-bold">
								英语课程 英语课程 英语课程 英语课程 英语课程 英语课程 英语课程 英语课程
							</view>
							<view class="u-font-24">
								时间：2021.03.18-08.01
							</view>
							<view class="u-font-24">
								地点：上海市外滩一号
							</view>
							<view class="u-font-24">
								类型：展览
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="shijvei">
				<view class="title u-flex justify-between">
					<view class="u-font-34 text-bold">
						视觉推荐
					</view>
					<view class="u-font-24" @click="multiRedirect('/pages/index/more?title=视觉推荐')">
						全部<text class="cuIcon-right"></text>
					</view>
				</view>
				<view class="main-box">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
						<view class="scroll-view-item_H " @click="multiRedirect('/pages/details/details')">
							<view class="">
								<image src="../../static/images/shijvei.jpg" mode="aspectFill"></image>
							</view>
							<view class="text">
								<view class="name u-font-26 text-bold">
									马蒂斯作品
								</view>
								<view class="jeisao u-font-22">
									亨利·马蒂斯（Henri Matisse ，1869—1954）法国著名画家，野兽派的创始人和主要代表人物..
								</view>
							</view>
						</view>
						<view class="scroll-view-item_H " @click="multiRedirect('/pages/details/details')">
							<view class="">
								<image src="../../static/images/shijvei.jpg" mode="aspectFill"></image>
							</view>
							<view class="text">
								<view class="name u-font-26 text-bold">
									马蒂斯作品
								</view>
								<view class="jeisao u-font-22">
									亨利·马蒂斯（Henri Matisse ，1869—1954）法国著名画家，野兽派的创始人和主要代表人物..
								</view>
							</view>
						</view>
						<view class="scroll-view-item_H " @click="multiRedirect('/pages/details/details')">
							<view class="">
								<image src="../../static/images/shijvei.jpg" mode="aspectFill"></image>
							</view>
							<view class="text">
								<view class="name u-font-26 text-bold">
									马蒂斯作品
								</view>
								<view class="jeisao u-font-22">
									亨利·马蒂斯（Henri Matisse ，1869—1954）法国著名画家，野兽派的创始人和主要代表人物..
								</view>
							</view>
						</view>
						<view class="scroll-view-item_H " @click="multiRedirect('/pages/details/details')">
							<view class="">
								<image src="../../static/images/shijvei.jpg" mode="aspectFill"></image>
							</view>
							<view class="text">
								<view class="name u-font-26 text-bold">
									马蒂斯作品
								</view>
								<view class="jeisao u-font-22">
									亨利·马蒂斯（Henri Matisse ，1869—1954）法国著名画家，野兽派的创始人和主要代表人物..
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="activity work">
				<view class="title u-flex justify-between">
					<view class="u-font-34 text-bold">
						艺术家给孩子们的作品
					</view>
					<view class="u-font-24" @click="multiRedirect('/pages/index/more?title=艺术家给孩子们的作品')">
						全部<text class="cuIcon-right"></text>
					</view>
				</view>
				<view class="main-box">
					<view class=" u-flex" @click="multiRedirect('/pages/details/details')">
						<view class="">
							<image src="../../static/images/renwu.jpg" mode="aspectFill"></image>
						</view>
						<view class="">
							<view class="u-font-28 text-bold">
								高贝贝
							</view>
							<view class="u-font-24">
								高贝贝年度推新锐艺术家毕业于清华大学美术学院绘画系
							</view>
						</view>
					</view>
					<view class=" u-flex" @click="multiRedirect('/pages/details/details')">
						<view class="">
							<image src="../../static/images/renwu.jpg" mode="aspectFill"></image>
						</view>
						<view class="">
							<view class="u-font-28 text-bold">
								高贝贝
							</view>
							<view class="u-font-24">
								高贝贝年度推新锐艺术家毕业于清华大学美术学院绘画系
							</view>
						</view>
					</view>
					<view class="u-flex" @click="multiRedirect('/pages/details/details')">
						<view class="">
							<image src="../../static/images/renwu.jpg" mode="aspectFill"></image>
						</view>
						<view class="">
							<view class="u-font-28 text-bold">
								高贝贝
							</view>
							<view class="u-font-24">
								高贝贝年度推新锐艺术家毕业于清华大学美术学院绘画系
							</view>
						</view>
					</view>
				</view>
			</view>

			<u-gap height="80"></u-gap>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'], //轮播图

				list: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				
				active:true
			}
		},
		onLoad() {

		},
		methods: {
			changeAutoplay(e) {
				console.log(e.detail.current)
				this.active = e.detail.current
			},
			//页面跳转
			multiRedirect(url) {
				if (url && url.length > 0) {
					console.log('+++++', url.indexOf('http'))
					if (url.indexOf('http') === 0) {
						// #ifdef H5 
						location.href = url
						// #endif
						// #ifdef MP-WEIXIN
						uni.navigateTo({
							url: '/pages/web/web?url=' + encodeURIComponent(url)
						})
						// #endif
						// #ifdef APP-PLUS
						plus.runtime.openURL(url, function(res) {
							console.log(res);
						});
						// #endif
					} else if (url.indexOf('&switch') > -1) {
						url = url.substring(0, url.indexOf('&switch'))
						console.log(3434, url)
						uni.switchTab({
							url: url
						})
					} else {
						console.log("挑起", url)
						uni.navigateTo({
							url
						})
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.white {
		min-height: 100vh;
		background-color: #FFFFFF;
		/* #ifdef H5 */
		min-height: calc(100vh - 50px);
		/*#endif */
	}
	
	.page-section{
		position: relative;
		
		.indicator{
			position: absolute;
			bottom: 20rpx;
			left: 0;
			right: 0;
			margin: auto;
		}
		.yang{
			display: block;
			width: 20rpx;
			height: 8rpx;
			// background-color:rgba(28,68,111,0.5) ;
			background-color:#fff ;
			border-radius: 4rpx;
		}
		.yang+.yang{
			margin-left: 20rpx;
		}
		.bianda{
			width: 30rpx;
			background-color:rgba(248,31,40,1) ;
		}
	}
	
	.notice {
		margin: 0 25rpx;
	}

	.weui-cell__bd {
		border: 2rpx solid #E9E9E9;
		margin: 34rpx 40rpx;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 50rpx;

		// padding:10rpx 20rpx;
		.cuIcon-search {
			margin: 0 14rpx 0 26rpx;
		}

		.weui-input {
			height: 60rpx;
			line-height: 60rpx;
		}

		.seek {
			width: 94rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 0 50rpx 50rpx 0;
		}
	}

	.swiper {
		image {
			width: 100%;
			height: 355rpx;
		}
	}

	.nax {
		background-color: #FFFFFF;
		text-align: center;

		image {
			width: 84rpx;
			height: 84rpx;
			border-radius: 50%;
			margin: auto;
			margin-bottom: 10rpx;
		}

		>view {
			width: 20%;
			margin-bottom: 40rpx;
		}
	}

	.title {
		padding: 10rpx 40rpx;

		.u-font-24 {
			color: #999999;

			.cuIcon-right {
				margin-left: 8rpx;
			}
		}
	}

	.main-box {
		margin: 25rpx;
		padding: 26rpx;
		border-radius: 10rpx;
		box-shadow: 0rpx 0rpx 30rpx 0rpx #eae6e6;

		image {
			width: 228rpx;
			height: 228rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}

		.flex+.flex {
			margin-top: 20rpx;
		}

		.u-font-28 {
			color: #000000;
		}

		.u-font-24 {
			margin-top: 24rpx;
			color: #333;
		}
	}

	.activity .main-box {
		image {
			width: 194rpx;
			height: 194rpx;
			margin-right: 25rpx;
		}

		.u-font-28 {
			max-width: 400rpx;
			color: #5A5A5A;
			overflow: hidden; //超出的文本隐藏
			text-overflow: ellipsis; //溢出用省略号显示
			white-space: nowrap; //溢出不换行
		}

		.u-font-24 {
			margin-top: 18rpx;
			color: #666;
		}
	}

	.work.activity .main-box {
		>.u-flex {
			margin-top: 14rpx;
		}

		.u-font-28 {
			color: #000000;
		}

		.u-font-24 {
			white-space: initial;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;
		}

		image {
			width: 195rpx;
			height: 260rpx;
			margin-right: 25rpx;
		}
	}

	.shijvei {
		.main-box {
			padding: 25rpx 0;
		}

		.scroll-view_H {
			white-space: nowrap; //溢出不换行

			.scroll-view-item_H {
				display: inline-flex;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
					margin: 0 15rpx 0 25rpx;
				}

				.text {
					max-width: 335rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.name {
						margin-bottom: 15rpx;
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; //溢出不换行
					}

					.jeisao {
						white-space: initial;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
					}
				}
			}
		}
	}
</style>
